<template>
  <div class="topNavCenter">
    <template>
      <span v-for="(item, index) in menuModuleLists" :key="index" @click="chosenav(item)">
        <span>
          {{ item.name }}
          <a :style="{ display: moduleId == item.id ? 'block' : 'none' }"></a>
        </span>
      </span>
      <!-- <span v-for="(item, index) in menuLists" :key="index">
        <span v-if="item.children && item.children.length < 2 && !item.display" :key="item.path">
          <span v-show="!son.display" v-for="son in item.children" :key="son.path" @click="chosenav(son.path)">
            {{ son.name }}
            <a :style="{ display: activeMenuPath.split('/')[1] == son.path ? 'block' : 'none' }"></a>
          </span>
        </span>

        <a-dropdown v-if="item.children && item.children.length > 1 && !item.display" :key="item.path">
          <span class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            {{ item.name }}
            <a :style="{ display: activeMenuPath.split('/')[1] == item.path ? 'block' : 'none' }"></a>
          </span>
          <a-menu slot="overlay">
            <a-menu-item v-show="!obj.display" v-for="obj in item.children" :key="obj.path">
              <a href="javascript:;" @click="chosenav(obj.path)">{{ obj.name }}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span> -->

      <!-- <span v-if="roleId==2||roleId==3" @click="chosenav('/distributionMap')"><i class="iconfont">&#xe68a;</i> 分布地图  <a
        :style="{'display':newType==3?'block':'none'}"></a></span>
      <span v-if="roleId==1" @click="chosenav('/workshop')"><i class="iconfont">&#xe610;</i> 车间看板  <a
        :style="{'display':newType==1?'block':'none'}"></a></span>
      <span v-if="roleId==1||roleId==2||roleId==3" @click="chosenav('/equipmentList')"><i class="iconfont">&#xe600;</i> 设备监控   <a
        :style="{'display':newType==2?'block':'none'}"></a> </span>
      <span v-if="roleId==2||roleId==3" @click="chosenav(4,roleId==2?'/basicInformation':'/machineReport')"><i class="iconfont">&#xe60d;</i> 统计报表   <a
        :style="{'display':newType==4?'block':'none'}"></a> </span> -->
    </template>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('menu/');
const { mapMutations } = createNamespacedHelpers('menu/');

export default {
  name: 'topNav',
  data() {
    return {
      // newType: 1,
      Detailshow: false,
      DetailType: 5,
      macsn: null,
      roleId: null,
      groupid: null,
    };
  },
  computed: {
    ...mapState(['value', 'menuLists', 'menuModuleLists', 'activeMenuPath', 'moduleId']),
    newType() {
      return this.$store.getters.HeadNavTypes;
    },
    isShowRemoteDiagnosis: function() {
      let deadline = localStorage.getItem('deadline') ? localStorage.getItem('deadline').split(' ')[0] : '1990-01-01';
      let userId = localStorage.getItem('userId');
      let today = this.$Moment().format('YYYY-MM-DD');
      let isOk = (this.$Moment(today).isBefore(deadline) && parseInt(userId) == 19) || this.roleId == 3;
      return isOk;
    },
  },
  watch: {
    Detailshow() {
      if (this.$route.fullPath.indexOf('deviceInfo')) {
        return true;
      }
    },
  },
  created() {
    if (this.$route.fullPath.indexOf('deviceInfo') >= 0) {
      this.Detailshow = true;
      let index = localStorage.getItem('DetailType');
      this.$store.commit('board/DetailType', index);
      this.DetailType = index;
      this.macsn = this.$route.query.macsn;
      this.groupid = this.$route.query.groupid;
    } else {
      this.Detailshow = false;
      if (localStorage.getItem('navType')) {
        let index = localStorage.getItem('navType');
        // this.newType = index;
        this.$store.commit('board/HeadNavType', index);
      } else {
        this.$store.commit('board/HeadNavType', 1);
      }
    }
    this.roleId = JSON.parse(localStorage.getItem("roleId"));
  },
  mounted() {
    // this.newType=this.$store.getters.HeadNavTypes
  },
  methods: {
    // 切换模块
    chosenav(item) {
      let {firstMenuPath, id} = item;
      this.$router.push({ path: firstMenuPath });
    },
  },
};
</script>

<style scoped lang="less">
.topNavCenter {
  span {
    display: inline-block;
    padding: 0 20px;
    line-height: 0.7rem;
    font-size: 16px;
    color: #fff;
    position: relative;
    cursor: default;

    i {
      margin-right: 3px;
    }

    &:hover {
      a {
        display: block;
      }
    }

    a {
      position: absolute;
      bottom: 3px;
      left: 20%;
      width: 60%;
      height: 3px;
      background-color: #fff;
      display: none;
    }
  }
}
</style>
